<template>
	<el-row :gutter="50" >
		<el-col :span="12">
			<el-card class="box-card">面试官: {{ interviewer }}</el-card>
			<probdesc ref="probdesc"></probdesc>
			

		</el-col>

		<el-col :span="12">
			<el-card class="box-card">面试者: {{ interviewee }}</el-card>
			<el-container>
				<el-main>
					<coder ref="editor"></coder>
				</el-main>

				<el-footer>
					<div class="right" v-if="isInterviewee()">
						<el-button type="success" @click="saveCode()">提交</el-button>
						<el-tooltip content="获取上次保存的代码" placement="top">
							<el-button type="success" icon="el-icon-refresh-left" @click="getLastUpdate()"></el-button>
						</el-tooltip>
						<el-switch v-model="usetimer" @change="changeTimer" active-text="定时保存代码">
						</el-switch>
						<el-input style="width: 150px;" v-model="time" onkeyup="value=value.replace(/[^\d]/g,0)">
							<template slot="append">秒</template>
						</el-input>
					</div>
					<div class="right" v-if="isInterviewer()">
						<el-tooltip content="获取面试人最新代码" placement="top">
							<el-button type="success" icon="el-icon-refresh-left" @click="getLastUpdate()"></el-button>
						</el-tooltip><el-switch v-model="usetimer" @change="changeTimer" active-text="定时获取代码">
						</el-switch>
						<el-input style="width: 150px;" v-model="time" onkeyup="value=value.replace(/[^\d]/g,0)">
							<template slot="append">秒</template>
						</el-input>
					</div>

				</el-footer>
			</el-container>
		</el-col>
	</el-row>
</template>

<script>
	import coder from "./CodeEditor.vue";
	import probdesc from "./problemDesc.vue";

	export default {
		data() {
			return {
				coderId: 0,
				probId: 0,
				interviewer: "",
				interviewee: "",
				timer: null,
				usetimer: false,
				time: 10,
			};
		},
		components: {
			coder,
			probdesc,
		},
		mounted() {
			const InspireCloud = require("@byteinspire/js-sdk");
			const serviceId = "qcqsjd";
			const inspirecloud = new InspireCloud({
				serviceId
			});

			var msg = {
				token: window.sessionStorage.getItem("token"),
				inviteId: parseInt(this.$route.params.id),
			}
			
			inspirecloud.run("invite_require_by_id", msg).then((data) => {
				
				if (data.status == 0) {
					this.coderId = data.inviteeUserId;
					this.probId = parseInt(data.probId);
					this.interviewee = data.inviteeUserEmail;
					this.interviewer = data.inviterUserEmail;
					this.$refs.probdesc.updateForm(this.probId);
					
				} else {
					this.$message.error(data.message);
					if (data.status == 1) this.$router.push("/login");
					if (data.status == 2) this.$router.push("/interviewList");
				}
				if(this.isInterviewer()) this.getLastUpdate()
			});
			

		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			changeTimer() {
				if(this.time<5){
					this.time=10
					this.$message.warning("定时设置过短,已改为10秒");
				}
				if (this.usetimer == true) {
					if (this.isInterviewer()) {
						this.timer = window.setInterval(() => {
							setTimeout(this.getLastUpdate(), 0)
						}, this.time * 1000)
					}
					if (this.isInterviewee()) {
						this.timer = window.setInterval(() => {
							setTimeout(this.saveCode(), 0)
						}, this.time * 1000)
					}
				} else {
					clearInterval(this.timer);
				}
			},
			getLastUpdate() {
				const tokenStr = window.sessionStorage.getItem("token");
				const myId = window.sessionStorage.getItem("userId");
				const type = window.sessionStorage.getItem("userType");
				if (tokenStr) {
					var msg = {
						token: tokenStr,
						probId: this.probId,
						language: this.$refs.editor.selectedMode,
						coderId: this.coderId,
					};
					if (this.isInterviewer()) delete msg.language
					const InspireCloud = require("@byteinspire/js-sdk");
					const serviceId = "qcqsjd";
					const inspirecloud = new InspireCloud({
						serviceId
					});

					inspirecloud.run("code_require", msg).then((data) => {
						//处理返回结果
						
						if (data.status == 0) {
							
							this.$refs.editor.changeMode(data.language);
							this.$refs.editor.coder.setValue(data.codeContent);
							this.$message.success("已获取最近提交代码");
						} else {
							if (this.isInterviewer()) this.$message.error("面试者未提交过代码");
							else this.$message.error("未找到该语言下的过往代码");
						}
					});
				} else {
					this.$message.error("请先登陆再提交代码");
					this.$router.push("/login");
				}
			},

			saveCode() {
				const tokenStr = window.sessionStorage.getItem("token");
				if (tokenStr) {
					var msg = {
						token: tokenStr,
						probId: this.probId,
						code: this.$refs.editor.code,
						lang: this.$refs.editor.selectedMode,
					};
					

					const InspireCloud = require("@byteinspire/js-sdk");
					const serviceId = "qcqsjd";
					const inspirecloud = new InspireCloud({
						serviceId
					});

					inspirecloud.run("code_save", msg).then((data) => {
						//处理返回结果

						if (data.status == 1) {
							this.$message.error(data.message);
							this.$router.push("/login");
						}
						if (data.status == 0) this.$message.success("代码保存成功");
						else this.$message.error(data.message);
					});
				} else {
					this.$message.error("请先登陆再提交代码");
					this.$router.push("/login");
				}
			},

			isInterviewer() {
				return window.sessionStorage.getItem("userType") == 2;
			},

			isInterviewee() {
				return window.sessionStorage.getItem("userType") == 1;
			},
		},
	};
</script>

<style>
	.right {
		float: right;
	}

	.el-switch {
		margin: 10px;
	}
	
	.el-row,.el-col{
		height: 100%;
	}
	
</style>
